<h3>类型</h3>
<h4>基本类型</h4>
<div class="alert alert-warning">
  <h4>消除双边框</h4>
  <p>
  当按钮处于两个文本框中间时，需要在<code>.input-group-addon</code>上添加样式修复工具类<code>.fix-border</code>。</p>
</div>
<div class="example row" contenteditable="true">
  <div class="col-md-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="用户名"> <span class=
      "input-group-addon">@gmail.com</span>
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon">@</span> <input type="text" class=
      "form-control" placeholder="用户名">
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon">@</span> <input type="text" class=
      "form-control" placeholder="用户名">
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="用户名"> <input type=
      "text" class="form-control" placeholder="密码">
    </div>
    <br>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="用户名"> <input type=
      "text" class="form-control" placeholder="密码">
    </div>
    <br>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="用户名"> <input type=
      "text" class="form-control" placeholder="密码">
    </div>
  </div>
</div>
<h4>连续分段的文本框</h4>
<p>
有时可能需要连续分段的文本框。这时需要在两个相邻的<code>.form-control</code>元素之间添加一个空的<code>.input-group-addon</code>，并同时添加工具栏</p>
<div class="alert alert-warning">
  <h4>兼容IE浏览器</h4>
  <p>
  因为IE8不支持<code>:empty</code>选择器，为兼容IE8浏览器，需要在<code>.input-group-addon</code>上添加额外的样式修复工具类<code>.fix-padding</code>。</p>
</div>
<div class="example row" contenteditable="true">
  <div class="col-md-6 input-group">
    <span class="input-group-addon">姓名</span> <input type="text" class=
    "form-control" placeholder="姓氏"> <input type="text" class="form-control"
    placeholder="名字">
  </div>
  <div class="col-md-6 input-group">
    <input type="text" class="form-control" placeholder="省份"> <input type=
    "text" class="form-control" placeholder="城市"> <input type="text" class=
    "form-control" placeholder="县/市"> <input type="text" class="form-control"
    placeholder="社区/乡/镇"> <input type="text" class="form-control" placeholder=
    "街道 门牌号">
  </div>
</div>
<h4>单选框和复选框</h4>
<div class="example row" contenteditable="true">
  <div class="col-md-6 input-group">
    <span class="input-group-addon"><input type="checkbox"></span> <input type=
    "text" class="form-control">
  </div>
  <div class="col-md-6 input-group">
    <span class="input-group-addon"><input type="radio"></span> <input type=
    "text" class="form-control">
  </div>
</div>
<h4>带按钮</h4>
<div class="alert alert-warning">
  <h4>消除双边框</h4>
  <p>
  当按钮处于两个文本框中间时，需要在<code>.input-group-btn</code>上添加样式修复工具类<code>.fix-border</code>。</p>
</div>
<div class="example row" contenteditable="true">
  <div class="col-md-6">
    <div class="input-group">
      <input type="text" class="form-control"> <span class=
      "input-group-btn"><button class="btn btn-default" type=
      "button"><span class="input-group-btn">搜索</span></button></span>
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-btn"><button class="btn btn-default" type=
      "button"><span class="input-group-btn">搜索</span></button></span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-group">
      <input type="text" class="form-control"> <span class=
      "input-group-btn"><button class="btn btn-default" type=
      "button"><span class="input-group-btn">搜索</span></button></span>
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-btn"><button class="btn btn-default" type=
      "button"><span class="input-group-btn">搜索</span></button></span>
      <input type="text" class="form-control"> <span class=
      "input-group-btn fix-border"><button class="btn btn-default" type=
      "button"><span class=
      "input-group-btn fix-border">搜索</span></button></span> <input type="text"
      class="form-control">
    </div>
  </div>
</div>
<h4>带下拉菜单的按钮</h4>
<div class="example row" contenteditable="true">
  <div class="col-md-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">选项</button>
        <ul class="dropdown-menu" role="menu">
          <li>
            <a href="#">选项</a>
          </li>
          <li>
            <a href="#">另一个选项</a>
          </li>
          <li>
            <a href="#">更多选项</a>
          </li>
          <li>
            <a href="#">特别内容</a>
          </li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-md-6 -->
  <div class="col-md-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">选项</button>
        <ul class="dropdown-menu pull-right" role="menu">
          <li>
            <a href="#">选项</a>
          </li>
          <li>
            <a href="#">另一个选项</a>
          </li>
          <li>
            <a href="#">更多选项</a>
          </li>
          <li>
            <a href="#">特别内容</a>
          </li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-md-6 -->
</div>
<h4>使用Select</h4>
<div class="alert alert-danger">
  <h4>浏览器兼容性问题</h4>
  <p>通常并不推荐在输入框组中使用select元素。这样可能会带来难以处理的兼容性问题。推荐使用 <strong>Dropdown</strong> 或者
  <strong>Chosen</strong>来代替下拉列表。</p>
</div>
<div class="example row" contenteditable="true">
  <div class="col-md-6 input-group">
    <select class="form-control">
      <option value="1">
        吃饭
      </option>
      <option value="2">
        睡觉
      </option>
      <option value="3">
        编程
      </option>
    </select> <span class="input-group-btn"><button class="btn btn-default"
    type="button"><span class="input-group-btn">搜索</span></button></span>
  </div>
  <div class="col-md-6 input-group">
    <span class="input-group-addon">地址</span> <select class="form-control">
      <option value="1">
        省份
      </option>
      <option value="2">
        北京
      </option>
      <option value="3">
        上海
      </option>
      <option value="3">
        广州
      </option>
    </select> <select class="form-control">
      <option value="1">
        市/县
      </option>
      <option value="1">
        ...
      </option>
    </select> <input type="text" class="form-control" placeholder="社区/乡/镇">
    <span class="input-group-btn"><button class="btn btn-default" type=
    "button"><span class="input-group-btn">确认</span></button></span>
  </div>
</div>
<h4>分段按钮</h4>
<div class="example row" contenteditable="true">
  <div class="col-md-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex=
        "-1">主要选项</button> <button type="button" class=
        "btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
        <span class="sr-only">更多选项</span></button>
        <ul class="dropdown-menu" role="menu">
          <li>
            <a href="#">选项</a>
          </li>
          <li>
            <a href="#">另一个选项</a>
          </li>
          <li>
            <a href="#">更多选项</a>
          </li>
          <li>
            <a href="#">特别内容</a>
          </li>
        </ul>
      </div><input type="text" class="form-control">
    </div><!-- /.input-group -->
  </div><!-- /.col-md-6 -->
  <div class="col-md-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex=
        "-1">主要选项</button> <button type="button" class=
        "btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
        <span class="sr-only">更多选项</span></button>
        <ul class="dropdown-menu pull-right" role="menu">
          <li>
            <a href="#">选项</a>
          </li>
          <li>
            <a href="#">另一个选项</a>
          </li>
          <li>
            <a href="#">更多选项</a>
          </li>
          <li>
            <a href="#">特别内容</a>
          </li>
        </ul>
      </div>
    </div><!-- /.input-group -->
  </div><!-- /.col-md-6 -->
</div>
